<template>
  <div style="width: 1400px">
    <el-row :gutter="20" style="width: 1380px">
      <el-col :span="7" style="width: 480px; margin-top: 30px">
        <el-carousel indicator-position="outside" height="450px">
          <el-carousel-item v-for="item in goodsImgs" :key="item.index">
            <img :src="item.url" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="14" style="width: 750px">
        <el-form ref="form" :model="this.form" label-width="50px">
          <h2>{{ form.spuname }}</h2>

          <div class="money">
            <el-form-item label="价格" prop="price">
              <span style="font-size: 30px; color: red">
                ￥{{ form.price }}
              </span>
              <span style="color: grey; text-decoration: line-through">
                ￥10.00
              </span>
            </el-form-item>
          </div>

          <el-form-item label="运费">
            <span> ￥5.00 </span>
          </el-form-item>
          <!-- <el-form-item
            label="规格"
            :model="this.value"
          > -->
          <span>规格</span>
          <div class="spuspecificationvalue">
            <!-- <div
              v-for="item of vaule"
              :key="item.id"
              class="spuspecificationvaluename"
            >
              <tr>
                <td>
                  <el-button
                    @click="clickcc(item)"
                    type="primary"
                    plain
                    :autofocus=autofocus
                    >{{ item.spuspecificationvaluename }}</el-button
                  >
                </td>
              </tr>
            </div> -->

            <el-checkbox-group
              v-model="checkList"
              v-for="item of vauless"
              :key="item.spuspecificationvaluenameId"
              class="spuspecificationvaluename"
            >
              <el-checkbox
                :label="item.spuspecificationvaluename"
                border
                @change="clickcc(item)"
                >{{ item.spuspecificationvaluename }}</el-checkbox
              >
            </el-checkbox-group>
          </div>

          <el-form-item label="数量">
            <el-input-number
              v-model="form.num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              size="small"
              style="width: 125px"
            ></el-input-number>
            件
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              plain
              class="el-icon-shopping-cart-1 buy"
              @click="gouwuche"
              >加入购物车</el-button
            >
            <el-button type="danger" class="buy" @click="lijigoumai"
              >立即购买</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2" style="width: 150px" class="look">
        <div>
          <p class="title-text"><span>看了又看</span></p>
          <div v-for="item of threeSup[0]" :key="item.id">
            <el-card :body-style="{ padding: '0px' }" style="width: 150px">
              <img
                :src="'http://localhost:5000/files/' + item.imageId"
                class="image"
                style="height: 120px"
              />
              <div style="padding: 3px">
                <div class="bottom" style="text-align: center">
                  <el-button type="text" class="button">{{
                    item.spuname
                  }}</el-button>
                </div>
                <div style="text-align: center">
                  <span style="font-size: small">${{ item.price }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="width: 1380px">
      <el-col :span="2" style="width: 230px; margin-top: 0px"> </el-col>

      <el-col :span="20" style="width: 1000px" :model="form">
        <el-tabs type="border-card">
          <el-tab-pane label="商品介绍">
            <tr>
              <td class="introduce">品牌：{{ form.brand }}</td>
            </tr>
            <tr>
              <td class="introduce">商品名称：{{ form.spuname }}</td>
            </tr>
            <tr>
              <td class="introduce">简介：{{ form.intro }}</td>
            </tr>

            <hr />
            <div class="images" v-for="item of imageList" :key="item.id">
              <img
                :src="'http://localhost:5000/files/' + item.imageId"
                alt=""
                height="580px"
                width="780px"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="规格与包装">
            <tr>
              <td class="introduce">保质期：</td>
            </tr>
            <tr>
              <td class="introduce">产品标准号：</td>
            </tr>
            <tr>
              <td class="introduce">生产许可证号：</td>
            </tr>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="2" style="width: 150px; margin-left: 230px" class="look">
        <div>
          <p class="title-text"><span>猜你喜欢</span></p>
          <div v-for="item of daothreeSup[0]" :key="item.id">
            <el-card :body-style="{ padding: '0px' }" style="width: 150px">
              <img
                :src="'http://localhost:5000/files/' + item.imageId"
                class="image"
                style="height: 120px"
              />
              <div style="padding: 3px">
                <div class="bottom" style="text-align: center">
                  <el-button type="text" class="button">{{
                    item.spuname
                  }}</el-button>
                </div>
                <div style="text-align: center">
                  <span style="font-size: small">${{ item.price }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getStoreList, List10, List11, postShopingCar } from "../api/store";
import { postorder } from "../api/home";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      imageid: "",
      form: {
        id: "",
        spuname: "",
        price: "",
        num: "",
      },
      vauless: [],
      order: {
        Spuname: "",
        UserId: "",
        Price: "",
        Num: "",
        State: "",
        Parameter: "",
        ShopId: "",
        imageId: "",
      },
      ShopingCar: {
        userId: 0,
        spuId: 0,
        spuTotal: 0,
        total: 0,
        totaPrice: 0,
      },
      vaule: [],
      value: [],
      image: {},
      checkList: [1, 2],
      goodsImgs: [],
      autofocus: false,
      imageList: [],
      threeSup: [],
      daothreeSup: [],
      nuss: 0,
    };
  },
  components: {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
      this.nuss = value;
    },
    clickcc(item) {
      console.log(item.spuspecificationvaluename);
      console.log(item);
      console.log(item.spuspecificationvaluenameId);

      console.log(this.checked);
    },
    lijigoumai() {
      if (this.uId) {
        console.log(this.form);
        console.log(this.form.spuname);
        this.order.Spuname = this.form.spuname;
        this.order.UserId = parseInt(this.uId);
        this.order.Price = parseInt(this.form.price);
        this.order.Num = this.form.num;
        this.order.State = "未支付";
        this.order.Parameter = "Parameter";
        this.order.ShopId = 0;
        this.order.imageId = this.imageid;

        console.log(this.order);

        postorder(this.order).then((data) => {
          console.log(data.data);
          this.$router.push("/checkOut?orderid=" + data.data.id);
        });
      } else {
        this.$message.error("请先登录！");
      }
    },

    gouwuche() {
      if (this.uId) {
        (this.ShopingCar.UserId = parseInt(this.uId)),
          console.log(this.ShopingCar.UserId);
        (this.ShopingCar.spuId = this.form.id),
          console.log(this.ShopingCar.spuId);
        this.ShopingCar.spuTotal = this.nuss;
        console.log(this.ShopingCar.spuTotal);
        console.log();
        (this.ShopingCar.total = 0),
          (this.ShopingCar.totaPrice = 0),
          console.log(this.ShopingCar);
        postShopingCar(this.ShopingCar).then((res) => {
          console.log(res);
        });
        this.$message.success("添加购物车成功！");
      } else {
        this.$message.error("请先登录！");
      }
    },
  },
  mounted() {
    getStoreList(this.id).then((data) => {
      let res = data.data;

      this.form = res.spu[0];
      this.imageid = this.form.imageId;
      console.log(this.form);
      console.log(res.spus.image);

      this.vauless = res.vaule;
      console.log(this.vauless);
      console.log(res.spus.image);

      res.spus.image.forEach((element) => {
        console.log(element);
        console.log(element.imageId);
        this.imageList.push(element);
        var obj = {
          url: "http://localhost:5000/files/" + element.imageId,
        };
        this.goodsImgs.push(obj);
      });
      List10().then((data) => {
        console.log(data.data);
        this.threeSup.push(data.data);
        console.log(this.threeSup[0]);
      });
      List11().then((data) => {
        console.log(data.data);
        this.daothreeSup.push(data.data);
        console.log(this.daothreeSup[0]);
      });

      // this.vaule = res.vaule;
      // console.log(this.vaule);

      // res.vaule.forEach((item) => {
      //   arr.push(item.spuspecificationvalueId,item.spuspecificationvaluename);
      // });
      // console.log(arr);

      // res.vaule.forEach((item)=>{
      //   var arr = [];
      //   if(item.spuspecificationId == 1){
      //     arr.push(item.spuspecificationname)
      //   }else{
      //     arr.push()
      //   }
      // })
    });
  },

  created() {
    this.id = this.$route.query.id;

    console.log(this.id);
  },
  computed: {
    uId() {
      return Cookies.get("id");
    },
  },
};
</script>

<style scoped>
.introduce {
  text-align: left;
  width: 200px;
  padding-left: 50px;
  height: 25px;
  font-size: small;
  color: grey;
}

.flavor {
  margin-top: 5px;
}

.score {
  padding-left: 30px;
}
.specifications {
  margin-top: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.buy {
  width: 130px;
}

.money {
  background-color: #f5f5f5;
}

.el-breadcrumb {
  background-color: #f5f5f5;
  line-height: 30px;
}

.el-card {
  margin-top: 10px;
}

.look {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.button {
  font-size: 17px;
  color: #666666;
  height: 30px;
}

.title-text span {
  display: block;
  position: relative;

  text-align: center;
}
.title-text span:before,
.title-text span:after {
  content: "";
  position: absolute;
  top: 50%;
  background: #dddddd;
  width: 25%;
  height: 1px;
}
.title-text span:before {
  left: 5%;
}
.title-text span:after {
  right: 5%;
}

.el-breadcrumb-item {
  font-size: 14px;
}

.el-col {
  border-radius: 4px;
  margin-top: 10px;
}

/* .el-header {
} */
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}
img {
  width: 100%;
  height: 100%;
}
.spuspecificationvalue {
  width: 500px;
  height: 200px;
}
.spuspecificationvaluename {
  margin-left: 5px;
  float: left;
}
</style>